<template>
  <div id="editSpacePage">
    <h2 style="margin-bottom: 16px; text-align: center">编辑云空间信息</h2>
    <!-- 空间信息表单 -->
    <a-form layout="vertical" :model="spaceForm" @finish="handleSubmit">
      <a-form-item label="空间名称" name="name">
        <a-input
          v-model:value="spaceForm.spaceName"
          placeholder="给云空间起个好听的名字吧"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="空间级别">
        <a-select
          v-model:value="spaceForm.spaceLevel"
          placeholder="编辑你的云空间级别"
          :options="SPACE_LEVEL_OPTIONS"
          allow-clear
          style="min-width: 150px"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          :loading="loading"
          block
          :icon="h(CloudSyncOutlined)"
        >
          提交修改
        </a-button>
      </a-form-item>
    </a-form>
    <!--    <a-card title="云空间级别介绍">-->
    <!--      <a-typography-paragraph>-->
    <!--        * 目前支持创建 普通版、会员版、超级会员版 三种空间-->
    <!--      </a-typography-paragraph>-->
    <!--      <a-typography-paragraph v-if="spaceLevelList[0]">-->
    <!--        {{ spaceLevelList[0].text }}：最大容量-->
    <!--        {{ formatSizeNoDecimalFraction(spaceLevelList[0].maxSize) }} ，可上传-->
    <!--        {{ spaceLevelList[0].maxCount }} 张图片-->
    <!--      </a-typography-paragraph>-->
    <!--      <a-typography-paragraph v-if="spaceLevelList[1]">-->
    <!--        {{ spaceLevelList[1].text }}：最大容量-->
    <!--        {{ formatSizeNoDecimalFraction(spaceLevelList[1].maxSize) }} ，可上传-->
    <!--        {{ spaceLevelList[1].maxCount }} 张图片-->
    <!--        &lt;!&ndash; 开通会员 气泡确认框 &ndash;&gt;-->
    <!--        <a-popconfirm-->
    <!--          title="确认开通会员吗?"-->
    <!--          ok-text="确认"-->
    <!--          cancel-text="取消"-->
    <!--          @cancel="upgradeUserRoleToVip"-->
    <!--        >-->
    <!--          <template #icon>-->
    <!--            <question-circle-outlined style="color: #1677ff" />-->
    <!--          </template>-->
    <!--          <a href="#">-->
    <!--            <a-button v-if="loginUser.userRole === 'user'" :icon="h(SketchOutlined)" type="link">-->
    <!--              开通会员-->
    <!--            </a-button>-->
    <!--          </a>-->
    <!--        </a-popconfirm>-->
    <!--      </a-typography-paragraph>-->
    <!--      <a-typography-paragraph v-if="spaceLevelList[2]">-->
    <!--        {{ spaceLevelList[2].text }}：最大容量-->
    <!--        {{ formatSizeNoDecimalFraction(spaceLevelList[2].maxSize) }} ，可上传-->
    <!--        {{ spaceLevelList[2].maxCount }} 张图片-->
    <!--        &lt;!&ndash; 开通超级会员 气泡确认框 &ndash;&gt;-->
    <!--        <a-popconfirm-->
    <!--          title="确认开通会员吗?"-->
    <!--          ok-text="确认"-->
    <!--          cancel-text="取消"-->
    <!--          @cancel="upgradeUserRoleToSvip"-->
    <!--        >-->
    <!--          <template #icon>-->
    <!--            <question-circle-outlined style="color: #1677ff" />-->
    <!--          </template>-->
    <!--          <a href="#">-->
    <!--            <a-button-->
    <!--              v-if="loginUser.userRole === 'user' || loginUser.userRole === 'vip'"-->
    <!--              :icon="h(CrownOutlined)"-->
    <!--              type="link"-->
    <!--            >-->
    <!--              开通超级会员-->
    <!--            </a-button>-->
    <!--          </a>-->
    <!--        </a-popconfirm>-->
    <!--      </a-typography-paragraph>-->
    <!--    </a-card>-->
  </div>
</template>

<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue'
import { editSpaceUsingPost, listSpaceLevelUsingGet } from '@/api/spaceController.ts'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { CloudSyncOutlined } from '@ant-design/icons-vue'
import { SPACE_LEVEL_OPTIONS } from '@/constants/space.ts'
import { getSpaceVoByIdUsingGet } from '@/api/spaceController.ts'

const space = ref<API.SpaceVO>()
// 空间信息表单，类型是编辑空间请求体，默认是空对象
const spaceForm = reactive<API.SpaceEditRequest>({})
// 空间级别列表
const spaceLevelList = ref<API.SpaceLevel[]>([])

const loading = ref(false)

const router = useRouter()

/**
 * 提交表单编辑空间信息
 * @param values
 */
const handleSubmit = async (values: any) => {
  const oldSpaceId = space.value?.id
  loading.value = true
  const res = await editSpaceUsingPost({
    id: oldSpaceId,
    ...spaceForm,
  })
  if (res.data.code === 0 && res.data.data) {
    message.success('编辑空间信息成功')
    // 跳转到空间详情页
    router.push({
      path: `/space/${res.data.data}`,
    })
  } else {
    message.error('编辑空间信息失败，' + res.data.message)
  }
  loading.value = false
}

/**
 * 远程获取空间级别详情列表
 */
const fetchSpaceLevelList = async () => {
  const res = await listSpaceLevelUsingGet()
  if (res.data.code === 0 && res.data.data) {
    spaceLevelList.value = res.data.data
  } else {
    message.error('获取空间级别详情列表失败，' + res.data.message)
  }
}

onMounted(() => {
  fetchSpaceLevelList()
})

const route = useRoute()

/**
 * 根据id获取老空间
 */
const getOldSpace = async () => {
  // 获取到id
  const id = route.query?.id
  if (id) {
    const res = await getSpaceVoByIdUsingGet({
      // @ts-ignore
      id,
    })
    if (res.data.code === 0 && res.data.data) {
      const data = res.data.data
      space.value = data
      // 填充表单值
      spaceForm.spaceName = data.spaceName
      // @ts-ignore
      spaceForm.spaceLevel = data.spaceLevel
    }
  }
}
/**
 * 根据route上的空间id展示老空间
 */
onMounted(() => {
  getOldSpace()
})

const upgradeUserRoleToVip = () => {
  // todo
}

const upgradeUserRoleToSvip = () => {
  // todo
}
</script>

<style scoped>
#editSpacePage {
  max-width: 550px;
  margin: 0 auto;
}
</style>
